<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滚动监听</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>
	<!--
		需要在body中设置一系列的属性
		data-offset 偏移量
	-->
	<body data-spy="scroll" data-target=".navbar" data-offset="70">
		<!--
			滚动监听依赖与导航栏
			 navbar-fixed-top 位置
			 依赖于导航组件
		-->
		<div class="container">
			<nav class="nav navbar-default navbar-fixed-top" role="navigation">
				<div class="container-fluid">
					<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myScroll">
						<ul class="nav navbar-nav">
							<li><a href="#test">这是一个测试</a></li>
							<li><a href="#test2">这是一个测试</a></li>
							<li><a href="#test3">这是一个测试</a></li>
							<li class="dropdown">
								<!--class="caret" 代替尖角号-->
								<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
								<ul class="dropdown-menu" role="menu">
									<li><a href="#one" tabindex="-1">one</a></li>
									<li><a href="#two" tabindex="-1">two</a></li>
									<li><a href="#three" tabindex="-1">three</a></li>
									
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		
			<h2 id="test">test1</h2>
			<p>
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				<hr />
			</p>
			<h2 id="test2">test2</h2>
			<p>
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
			</p>
			<h2 id="test3"></h2>
			<p>
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
			</p>
			<h2 id="one">one</h2>
			<p>
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
			</p>
			<h2 id="two">two</h2>
			<p>
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
			</p>
			<h2 id="three">three</h2>
			<p>
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
				这是一个测试...<br />
			</p>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script>
        	$("#myScroll").on('activate.bs.scrollspy',function(e){
        		alert("hello");
        	})
        </script>
	</body>
</html>
